﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Ecommerce</title>
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900%7CRoboto+Condensed:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/plugins/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/plugins/Magnific-Popup/magnific-popup.css">
    <link rel="stylesheet" href="assets/plugins/animate-css/animate.min.css">
    <link rel="stylesheet" href="assets/plugins/swiper/swiper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
    <!-- 引入头部的部分 -->
    <div th:include="/front/header"></div>

    <!-- page title -->
    <section class="page-title-inner" data-bg-img='assets/img/page-titlebg.png'>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- page title inner -->
                    <div class="page-title-wrap">
                        <div class="page-title-heading"><h1 class="h2">期刊<span>杂志</span></h1></div>
                        <ul class="list-unstyled mb-0">
                            <li><a href="index.html">首页</a></li>
                            <li class="active"><a href="#">博客详细信息</a></li>
                        </ul>
                    </div>
                    <!-- End of page title inner -->
                </div>
            </div>
        </div>
    </section>
    <!-- End of page title -->
    
    <!-- blog details inner -->
    <section class="pt-100 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row justify-content-center">
                        <div class="col-lg-10">
                            <!-- post main content -->
                            <div class="post-main-content text-center">
                                <!-- post mata -->
                                <div class="post-mata">
                                    <ul class="list-unstyled mb-0">
                                        <li>
                                            On.<a href="#">15 Sep 2018</a>
                                        </li>
                                        <li>
                                            By.<a href="#">Puchka Bolle</a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- End of post mata -->

                                <!-- post main heading-->
                                <div class="post-heading">
                                    <h2>彻底改变自己的<br>命运</h2>
                                </div>
                                <!-- post main heading-->

                                <!-- post image -->
                                <div class="post-main-image">
                                    <img src="assets/img/blog/blog-details.jpg" data-rjs="2" alt="">
                                    <div class="image-caption"><p>摄影: <a href="#">Walton de Singer</a></p></div>
                                </div>
                                <!--End of  post image -->
                            </div>
                            <!-- End of post main content -->
                        </div>
                        <div class="col-lg-8">
                            <!--single post content body -->
                            <div class="post-details-body">
                                <div class="single-post-content">
                                    <h5>1914年H. Rackham翻译</h5>
                                    <p>但是，我必须向您解释谴责享乐和赞美痛苦的所有错误观念是如何产生的，我将向您全面介绍该系统，并阐述真理的伟大探索者，人类的建设者的实际教actual。幸福。没有人会拒绝，不喜欢或避免享乐本身，因为它是享乐，而是因为那些不知道如何理性地追求享乐的人会遭受极其痛苦的后果。再也没有人爱，追求或渴望获得自身的痛苦，因为这是痛苦，而是因为偶尔发生辛苦和痛苦可以使他获得极大快乐的情况。举一个简单的例子，我们当中谁曾经进行过艰苦的体育锻炼，除了从中获得一些优势之外？但是，谁有权选择一个选择享受一种没有令人讨厌的后果的快乐的人，或者避免痛苦而又没有产生这种快乐的人呢？</p>
                                    <blockquote>
                                        “在工作和工作中，应尽量保持适当的时间。”
                                    </blockquote>
                                    <p>19世纪后期：被誉为“现代吉他之父”的弗朗西斯科·塔雷加和塞戈维亚，在总结前人经验的基础上，改进完善了许多演奏技巧，并创作了大量且优秀的吉他作品，使得一度流行于民间的吉他，终于真正登上古典音乐的圣堂。这是吉他发展史上的第三个黄金时期。</p>
                                    <h5>The standard Lorem Ipsum passage, used since the 1500s</h5>
                                    <p>20世纪至今：吉他已经成为世界上最为风靡的乐器之一，其多样的风格、出色的表现力、丰富的技巧、迷人的音色无不深深吸引着人们。</p>
                                </div>
                            </div>
                            <!-- End of single post content body -->
                        </div>
                        <div class="col-lg-12">
                            <!-- share abd tag border -->
                            <div class="share-and-tag">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <!--single post tag and share -->
                                        <div class="single-post-tag-share">
                                            <!-- single post tags -->
                                            <div class="single-blog-tag">
                                                <span>标签:</span>
                                                <a href="#">时尚</a>,
                                                <a href="#">美女</a>,
                                                <a href="#">趋势</a>
                                            </div>
                                            <!-- single post tags -->

                                            <!-- single blog share on -->
                                            <div class="single-blog-share">
                                                <ul class="list-unstyled mb-0">
                                                    <li>
                                                        <a href="#"><i class="fa fa-facebook"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="#"><i class="fa fa-twitter"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="#"><i class="fa fa-pinterest"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="#"><i class="fa fa-linkedin"></i></a>
                                                    </li>
                                                    <li>
                                                        <a href="#"><i class="fa fa-google-plus"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--End of single blog share on -->
                                        </div>
                                        <!--End of single post tag and share -->
                                    </div>
                                </div>
                            </div> 
                            <!-- share abd tag border -->
                        </div>
                        <div class="col-lg-8">
                            <!-- single post author -->
                            <div class="single-post-author media">
                                <img src="assets/img/blog/post-author.jpg" data-rjs ='2' alt="">
                                <div class="post-author-body media-body">
                                    <h6>沃尔顿·德·辛格</h6>
                                    <p>在中世纪阶段，欧洲音乐仍未发展出完整的和声概念，因此吉他展开了漫长的演进之路。</p>
                                </div>
                            </div>
                            <!-- End of single post author -->
                        </div>
                        <div class="col-lg-10">
                            <!-- related post -->
                            <div class="single-related-post-inner">
                                <div class="related-post-head">
                                    <h3>相关文章</h3>
                                </div>
                                <!-- related post wraper -->
                                <div class="related-post-wraper">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <!-- single blog wraper -->
                                            <div class="single-blog-wrap type2">
                                                <!-- post image -->
                                                <div class="single-blog-image hover-effect">
                                                    <a href="#"><img src="assets/img/blog/img3.jpg" data-rjs="2" alt=""></a>
                                                </div>
                                                <!--End of  post image -->

                                                <!-- single blog details -->
                                                <div class="single-blog-details post-content">
                                                    <div class="post-info">
                                                        <span>作者</span><a href="#">Puchka Bolle</a>
                                                    </div>
                                                    <div class="post-body">
                                                        <h4><a href="#">吉他历史</a></h4>
                                                        <p>19世纪初吉他的外观开始定型，并慢慢演变成我们现今所看到的样子，更以其独特的魅力风靡全世界，在这段期间，涌现了许多杰出的吉他演奏家和作曲家。</p>
                                                        <a href="#" class="btn btn-line">继续阅读...</a>
                                                    </div>
                                                </div>
                                                <!--End of single blog details -->
                                            </div>
                                            <!-- End of single blog wraper -->
                                        </div>

                                        <div class="col-lg-6">
                                            <!-- single blog wraper -->
                                            <div class="single-blog-wrap type2">
                                                <!-- post image -->
                                                <div class="single-blog-image hover-effect">
                                                    <a href="#"><img src="assets/img/blog/img4.jpg" data-rjs="2" alt=""></a>
                                                </div>
                                                <!--End of  post image -->

                                                <!-- single blog details -->
                                                <div class="single-blog-details post-content">
                                                    <div class="post-info">
                                                        <span>作者</span><a href="#">Puchka Bolle</a>
                                                    </div>
                                                    <div class="post-body">
                                                        <h4><a href="#">吉他历史</a></h4>
                                                        <p>19世纪初吉他的外观开始定型，并慢慢演变成我们现今所看到的样子，更以其独特的魅力风靡全世界，在这段期间，涌现了许多杰出的吉他演奏家和作曲家。</p>
                                                        <a href="#" class="btn btn-line">继续阅读...</a>
                                                    </div>
                                                </div>
                                                <!--End of single blog details -->
                                            </div>
                                            <!-- End of single blog wraper -->
                                        </div>
                                    </div>
                                </div>
                                <!-- related post wraper -->
                            </div>
                            <!--End of related post -->
                        </div>
                        <div class="col-lg-12">
                            <!-- post comments wrap -->
                            <div class="post-comments-wrap">
                                <h4>评论 (05)</h4>
                                <!-- comment content-->
                                <div class="row">
                                    <div class="col-lg-9 offset-lg-1">
                                        <div class="single-post-comment-inner">
                                            <ul>
                                                <li>
                                                    <!-- single post comment -->
                                                    <div class="d-flex single-post-comment">
                                                        <div class="avatar">
                                                            <div class="comment-author-image">
                                                                <img src="assets/img/shop/author1.jpg" data-rjs="2" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="avatar-details">
                                                            <h6>肯特黑文斯</h6><span class="commnet-time">2天前</span>
                                                            <p>在中世纪阶段，欧洲音乐仍未发展出完整的和声概念，因此吉他展开了漫长的演进之路。</p>
                                                            <a href="#">回复<span><i class="fa fa-reply"></i></span></a>
                                                        </div>
                                                    </div>
                                                    <!-- end of single post comment -->
                                                    <ul>
                                                        <li>
                                                            <!-- single post comment -->
                                                            <div class="d-flex single-post-comment">
                                                                <div class="avatar">
                                                                    <div class="comment-author-image">
                                                                        <img src="assets/img/shop/author2.jpg" data-rjs="2" alt="">
                                                                    </div>
                                                                </div>
                                                                <div class="avatar-details">
                                                                    <h6>尼古拉斯·雷泽德</h6><span class="commnet-time">2天前</span>
                                                                    <p>在中世纪阶段，欧洲音乐仍未发展出完整的和声概念，因此吉他展开了漫长的演进之路。</p>
                                                                    <a href="#">回复<span><i class="fa fa-reply"></i></span></a>
                                                                </div>
                                                            </div>
                                                            <!-- single post comment -->
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <!-- single post comment -->
                                                    <div class="d-flex single-post-comment">
                                                        <div class="avatar">
                                                            <div class="comment-author-image">
                                                                <img src="assets/img/shop/author3.jpg" data-rjs="2" alt="">
                                                            </div>
                                                        </div>
                                                        <div class="avatar-details">
                                                            <h6>肯德拉·拉兹拉夫</h6><span class="commnet-time">2天前</span>
                                                            <p>在中世纪阶段，欧洲音乐仍未发展出完整的和声概念，因此吉他展开了漫长的演进之路。</p>
                                                            <a href="#">回复<span><i class="fa fa-reply"></i></span></a>
                                                        </div>
                                                    </div>
                                                    <!-- single post comment -->
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- End of single comment -->
                            </div>
                            <!-- End of post comments wrap -->

                            <!-- comment form -->
                            <div class="comment-form-wrap">
                                <h4>留下你的想法</h4>

                                <div class="row">
                                    <div class="col-lg-9 offset-lg-1">
                                        <!-- commnet respond -->
                                        <div class="comment-respond contact-form parsley-validate">
                                            <form action="#" method="post">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <input type="text" name="name" class="theme-input-style" placeholder="Your Name" required>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="email" name="email" class="theme-input-style" placeholder="Your email" required>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <input type="text" name="subject" class="theme-input-style" placeholder="Subject" required>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <textarea name="message" placeholder="Message here" class="theme-input-style"></textarea>
                                                        <div class="comment-form-btn">
                                                            <button class="btn">发信息</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <!-- commnet respond -->
                                    </div>
                                </div>
                            </div>
                            <!-- End of comment form -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Ennd of blog details inner -->


    <!-- footer area -->
    <!-- 引入页面尾部的部分 -->
    <div th:include="/front/footer"></div>
    <!-- End of footer area -->
        
    <!-- back to top -->
    <div class="back-to-top">
        <a href="#">
            <div class="back-toop-tooltip"><span>返回顶部</span></div>
            <div class="top-array"></div>
            <div class="top-line"></div>
        </a>
    </div>
    <!-- back to top -->

    <!-- Modal 
    <div class="modal-window-container fancy">
        <div class="modal-window-overlay"></div>
        <div class="modal-window-content">
            <div class="modal-window-inner text-center">
                <h2>Don’t Miss Out</h2>
                <h4>Sign Up & Save</h4>
                <h2 class="h1">25</h2><span>%</span>
                <p>It is a long established fact that a reader will<br> distracted by the readable content of a page when looking injected humour its layout.</p>
                <div class="modal-subscribe">
                    <form action="#">
                        <input type="text" class="theme-input-style" required placeholder="Your Email Here">
                        <button type="submit"><img src="assets/img/icons/right-icon.svg" class="svg" alt=""></button>
                    </form>
                </div>
                <div class="modal-window-close">
                    <img src="assets/img/icons/close-button.svg" class="svg" alt="">
                </div>  
            </div>
        </div>
    </div>-->
    <!-- End of main wrapper -->

    <!-- Modal quick view-->
    <div class="modal-quickview-container">
        <div class="quick-view-content-wrap">
            <div class="modal-window-overlay"></div>
            <div class="quick-view-content">
                <div class="modal-window-close">
                    <img src="assets/img/icons/close-button.svg" class="svg" alt="">
                </div> 
                <div class="quick-view-content-inner">
                    <div class="row align-items-center">
                        <div class="col-lg-7">
                            <!-- Start shop product slider -->
                            <div class="shop-product-slider-wrap">
                                <!-- Start shop slider top side -->
                                    <div class="swiper-container quick-product-gallery">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img class='' src="assets/img/shop/quick-view1.png" alt="" data-rjs="2" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img class='' src="assets/img/shop/quick-view2.png"  alt="" data-rjs="2" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img class='' src="assets/img/shop/quick-view3.png" alt="" data-rjs="2" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img class='' src="assets/img/shop/quick-view4.png" alt="" data-rjs="2" />
                                        </div>
                                    </div>
                                </div>
                                    <!-- End of shop slider top side -->
                                
                                <!-- Start shop slider bottom side -->
                                <div class="swiper-container quick-product-thumbs">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img src="assets/img/shop/details-nav1.png" data-rjs="2" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="assets/img/shop/details-nav3.png" data-rjs="2" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="assets/img/shop/details-nav4.png" data-rjs="2" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="assets/img/shop/details-nav5.png" data-rjs="2" alt="">
                                        </div>
                                    </div>
                                </div>
                                <!-- End of shop slider bottom side -->
                            </div>
                            <!-- End of shop product slider -->
                        </div>

                        <div class="col-lg-5">
                            <!-- product details inner -->
                            <div class="product-details-inner">
                                <!-- product info -->
                                <div class="product-info">
                                    <div class="product-rating">
                                        <div class="star-rating">
                                            <span></span>
                                        </div>
                                    </div>

                                    <!-- product title -->
                                    <div class="product-title">
                                        <h4><a href="shop-details.html">Woven Throw Pillow</a></h4>
                                    </div>
                                    <!-- end of product title -->

                                        <div class="product-price"><h3 class="new-price">$25</h3><h5 class="old-price">$30.1</h5></div>

                                        <div class="product-description">
                                            <p>Ladyship it daughter securing procured or am moreover mr Put sir she exercise vicinity cheerful wondered.</p>
                                        </div>

                                    <!-- list product group -->
                                    <div class="list-product-group">
                                        <ul class="mb-0 list-unstyled">
                                            <li class="size-group group">
                                                <span class="list-heading">size:</span>
                                                <ul class="size-list mb-0 list-unstyled">
                                                    <li><a href="#" class="product-size"><span>L</span></a></li>
                                                    <li><a href="#" class="active product-size"><span>M</span></a></li>
                                                    <li><a href="#" class="product-size"><span>S</span></a></li>
                                                </ul>
                                            </li>
                                            <li class="quantity-group group">
                                                <span class="list-heading">quantity:</span>
                                                <div class="product-quantity">
                                                    <span class="minus"><img src="assets/img/icons/minus.svg" class="svg" alt=""></span>
                                                    <input type="text" value="0" class="product-quantity-list product-size">
                                                    <span class="plus"><img src="assets/img/icons/plus.svg" class="svg" alt=""></span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- End of list product group -->

                                    <!-- product details btns -->
                                    <div class="product-details-btns">
                                        <div class="addto-bag-btn">
                                            <a href="#" class="btn btn-fill-type">
                                                <span><img src="assets/img/icons/add-bag.svg" alt="" class="svg"></span><span class="d-none d-lg-block mr-0">Add To Cart</span>
                                            </a>
                                        </div>
                                            <div class="wish-btn">
                                            <a href="#" class="btn btn-fill-type">
                                                <span class=""><img src="assets/img/icons/wishlist.svg" alt="" class="svg"></span><span class="d-none d-lg-block mr-0"></span>
                                            </a>
                                        </div>
                                        <div class="compare-btn">
                                            <a href="#" class="btn btn-fill-type">
                                                <span><img src="assets/img/icons/compare.svg" alt="" class="svg"></span>
                                            </a>
                                        </div>
                                    </div>
                                    <!-- product details btns -->

                                    <!-- more detailes -->
                                    <div class="more-details-button">
                                        <a href="shop-details.html" class="btn btn-line roboto">More Details</a>
                                    </div>
                                    <!-- End of more detailes -->

                                    <!-- product mata -->
                                    <div class="product_meta item-product-meta-info">
                                        <span class="sku_wrapper">
                                            <label>
                                                SKU:
                                                <span>N/A</span>
                                            </label>
                                        </span>
                                        <span class="posted_in">
                                            <span class="meta-item-list">
                                                <a href="#">accessories</a>,
                                                <a href="#">fashion</a>,
                                                <a href="#">summer</a>
                                            </span>
                                        </span>
                                    </div>
                                    <!-- End of product mata -->
                                </div>
                                    <!-- End of product info -->
                            </div>
                            <!-- End of product details inner -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
    <!--End of Modal quick view-->

    <!-- add add to cart notifacition -->
    <div class="modal-add-notifacition">
        <div class="add-notifacition-inner media align-items-center">
            <div class="add-noti-image">
                <img src="assets/img/product/add-note.jpg" alt="">
            </div>
            <div class="add-noti-text media-body">
                <span>Cat Eye Reading Glasses</span>
                <p>Added To Your Cart Successfully!</p>
            </div>
        </div>
    </div>
    <!-- add add to cart notifacition -->

    <!-- add add to cart notifacition -->
    <div class="modal-wish-notifacition">
        <div class="wish-notifacition-inner media align-items-center">
            <div class="wish-noti-image">
                <img src="assets/img/product/add-note.jpg" alt="">
            </div>
            <div class="wish-noti-text media-body">
                <span>Cat Eye Reading Glasses</span>
                <p>Added To Your Wish Successfully!</p>
            </div>
        </div>
    </div>
    <!-- add add to cart notifacition -->

    <!-- JS Files -->
    <!-- ==== JQuery 3.3.1 js file==== -->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
    <script src="assets/plugins/parsley/parsley.min.js"></script>
    <script src="assets/plugins/retinajs/retina.min.js"></script>
    <script src="assets/plugins/parallax/parallax.js"></script>
    <script src="assets/plugins/parallax/parallaxh.min.js"></script>
    <script src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
    <script src="assets/plugins/Magnific-Popup/jquery.magnific-popup.min.js"></script>
    <script src="assets/plugins/waypoints/jquery.counterup.min.js"></script>
    <script src="assets/plugins/isotope/packery.pkgd.min.js"></script>
    <script src="assets/plugins/swiper/swiper.min.js"></script>
    <script src="assets/plugins/countdown/jquery.countdown.min.js"></script>
    <script src="assets/plugins/Magnific-Popup/jquery.elevateZoom-3.0.8.min.js"></script>
    <script src="assets/plugins/tweenmax/TweenMax.min.js"></script>
    <script src="assets/plugins/text-animation/anime.min.js"></script>
    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyB2D8wrWMY3XZnuHO6C31uq90JiuaFzGws"></script>
    <script src="assets/js/scripts.js"></script>
    <script src="assets/js/custom.js"></script>
</body>
</html>